<script setup lang="ts">
/*
 * @description:列表 订单表
 * @author: lxx
 * @date: 2025-8-9
 * @version: V1.0.0
 */
import { dataPageApi, dataBatchDelApi } from '@/api/orders'
import type { ItemFormInt } from '@/api/orders/types'
import type { ItemFormInt as MemberItemFormInt } from '@/api/member/types'
import AddEditForm from './AddEditForm.vue'
import { usePage } from '@/hooks/system/useFramework'
import constants from '@/common/constant'
import SelectMember from '@/views/member/SelectMember.vue'

/* 查询参数*/
const queryParams = ref<{
  keywords: string
  memberId: number | null
}>({
  keywords: '',
  memberId: null
})
const memberItem = ref<MemberItemFormInt>({
  id: null,
  // 姓名
  username: '',
  // 电话
  phone: '',
  // 性别
  sex: '',
  // 会员等级
  memberlevel: '',
  // 余额
  balance: ''
})

watchEffect(() => {
  queryParams.value.memberId = memberItem.value?.id || null
})

/* 查询的FormRef*/
const queryFormRef = ref()
/* 新增编辑FormRef*/
const addEditFormRef = ref()
const { queryPage, tableData, loading, handleQuery, handleResetQuery, handleAddEdit, handleDelete, handleSelectChange } = usePage<ItemFormInt>(
  dataPageApi,
  dataBatchDelApi,
  queryParams,
  queryFormRef,
  addEditFormRef
)
</script>
<template>
  <div class="web-container-box flex-start-start column">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-card shadow="hover">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="会员信息" prop="keywords">
            <!-- <el-input v-model="queryParams.keywords" placeholder="关键字" clearable @keyup.enter="handleQuery" /> -->
            <SelectMember v-model="memberItem" />
          </el-form-item>
          <el-form-item class="search-buttons">
            <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
            <!-- <el-button icon="refresh" @click="handleResetQuery">重置</el-button> -->
            <el-button type="success" icon="plus" @click="handleAddEdit('add')">新增</el-button>
            <!-- <el-button type="danger" icon="delete" @click="handleDelete()">删除</el-button> -->
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <!-- 列表 -->
    <el-card shadow="hover" class="data-table">
      <el-table
        v-loading="loading"
        width="100%"
        max-height="680"
        :data="tableData"
        @selection-change="handleSelectChange"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="">
          <el-table-column type="expand">
            <template #default="props">
              <div class="table-form-box">
                <div class="card-header">
                  <h3>眼部数据</h3>
                </div>
                <div class="table-header-box flex-center-start">
                  <div class="cell-box">R/L</div>
                  <div class="cell-box">球镜</div>
                  <div class="cell-box">柱镜</div>
                  <div class="cell-box">轴向</div>
                  <div class="cell-box">矫正视力</div>
                </div>
                <div class="table-body-box">
                  <div class="table-body-row flex-center-start">
                    <div class="cell-box">R</div>
                    <div class="cell-box">{{ props.row.sphereR || '暂无' }}</div>
                    <div class="cell-box">{{ props.row.cylinderR || '暂无' }}</div>
                    <div class="cell-box">{{ props.row.axialR || '暂无' }}</div>
                    <div class="cell-box">{{ props.row.correctedVisionR || '暂无' }}</div>
                  </div>
                  <div class="table-body-row flex-center-start">
                    <div class="cell-box">L</div>
                    <div class="cell-box">{{ props.row.sphereL || '暂无' }}</div>
                    <div class="cell-box">{{ props.row.cylinderL || '暂无' }}</div>
                    <div class="cell-box">{{ props.row.axialL || '暂无' }}</div>
                    <div class="cell-box">{{ props.row.correctedVisionL || '暂无' }}</div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="会员信息" prop="memberId" width="160px">
          <template v-slot="scope">
            <el-tag>{{ scope.row.memberUsername }}({{ scope.row.memberPhone }})</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="PD" prop="glassesPd" />
        <el-table-column label="ADD" prop="glassesAdd" />
        <el-table-column label="商品" prop="spectaclesFrame" min-width="200" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.goodsName }}</span>
            <el-tag>{{ `${scope.row.goodsModel}(${scope.row.goodsSpecs})` }}</el-tag>
            <!-- <dict-label :code="constants.GLASSES_FRAME" :model-value="scope.row.spectaclesFrame" /> -->
          </template>
        </el-table-column>
        <el-table-column label="镜片" prop="eyeglass" />
        <el-table-column label="实际金额" prop="orderMoney" width="100px">
          <template #default="scope">
            <span style="color: #f56c6c">
              {{ scope.row.orderMoney }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createdTime" width="180px" />
        <el-table-column label="取镜日期" prop="getGlassesDate" width="180px" />
        <el-table-column fixed="right" label="操作" align="center" width="170">
          <template #default="scope">
            <el-button type="primary" link size="small" icon="edit" @click.stop="handleAddEdit('edit', scope.row)">编辑</el-button>
            <el-button type="danger" link size="small" icon="delete" @click.stop="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="queryPage.total > 0"
        layout="prev, pager, next, sizes, total"
        :total="queryPage.total"
        v-model:current-page="queryPage.pageNum"
        v-model:page-size="queryPage.pageSize"
        @current-change="handleQuery"
        @size-change="handleQuery"
      />
    </el-card>

    <!-- 新增、编辑弹窗 -->
    <AddEditForm ref="addEditFormRef"></AddEditForm>
  </div>
</template>
<style lang="scss" scoped>
.table-form-box {
  padding: 0 20px;
  .table-header-box {
    border-left: 1px solid #ddd;

    .cell-box {
      border-bottom: 1px solid #ddd;
      border-top: 1px solid #ddd;
      border-right: 1px solid #ddd;
      font-weight: 600;
      width: 100px;
      background-color: #f5f5f5;
      padding: 8px 0;
      text-align: center;
    }
  }

  .table-body-box {
    .table-body-row {
      border-left: 1px solid #ddd;
      .cell-box {
        width: 100px;
        padding: 8px 0;
        text-align: center;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
      }
    }
  }
}
</style>
